/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<!-- 整体征收情况 -->
<template>
  <div class="modal-box">
    <p class="title">
      <b class="left">总体征收情况</b>
      <b class="right"><slot name="right"></slot></b>
    </p>
    <ul>
      <li style="border: #c2c2c2 solid; border-width: 0 1px 1px 0;">
        <p class="name">征收总户数</p>
        <p class="info"><b class="num"><countup :end-val="family.planned || 0" :duration="3" :decimals="0" ></countup></b><b class="unit">户</b></p>
      </li>
      <li style="border: #c2c2c2 solid; border-width: 0 0 1px 0;">
        <p class="name">已完成征收户</p>
        <p class="info"><b class="num"><countup :end-val="family.completed || 0" :duration="3" :decimals="0" ></countup></b><b class="unit">户</b></p>
      </li>
      <li style="border: #c2c2c2 solid; border-width: 0 1px 0 0;">
        <p class="name">进行中征收户</p>
        <p class="info"><b class="num"><countup :end-val="family.progress || 0" :duration="3" :decimals="0" ></countup></b><b class="unit">户</b></p>
      </li>
      <li>
        <p class="name">计划中征收户</p>
        <p class="info"><b class="num"><countup :end-val="family.unstart || 0" :duration="3" :decimals="0" ></countup></b><b class="unit">户</b></p>
      </li>
    </ul>
  </div>
</template>
<script>
import { Countup } from 'vux';
export default {
  props: {
    family: Object
  },
  data() {
    return {

    };
  },
  mounted() {

  },
  methods: {

  },
  components: {Countup}
};

</script>
<style lang='less' scoped>
@import "../../util/theme.less";

ul{
  .mix-flex-center();
  width: 100%;
  position: relative;
  flex-wrap: wrap;
  li{
    flex: 0 0 50%;
    display: inline-block;
    padding: 5px;
    .name{
      font-size: 13px;
      color: @font-regular;
      .mix-flex-center();
    }
    .info{
      .mix-flex-center();
      .num{
        font-size: 20px;
        color: @primary;
        font-weight: normal;
      }
      .unit{
        font-size: 10px;
        color: @font-secondary;
        margin-left: 6px;
      }
    }
  }
}


</style>
